<template>
  <div>
    <movie-header></movie-header>

    <div class="contentMain">
      <Card :dis-hover="true">
        <Tabs value="0">
          <TabPane label="收件箱" name="0">
            <List class="list" item-layout="horizontal">
              <email-list
                v-for="item in receiveEmails"
                :key="item._id"
                :title="item.title"
                :user="item.fromUser"
                :context="item.context"
                receive="2"
              ></email-list>
            </List>
          </TabPane>
          <TabPane label="发件箱" name="1">
            <List class="list" item-layout="horizontal">
              <email-list
                v-for="item in sendEmails"
                :key="item._id"
                :title="item.title"
                :user="item.toUser"
                :context="item.context"
                receive="1"
              ></email-list>
            </List>
          </TabPane>
          <TabPane label="发送站内信" name="2">
            <!-- 送信弹出框 -->
            <send-talk-box></send-talk-box>
          </TabPane>
        </Tabs>
      </Card>
    </div>

    <movie-footer></movie-footer>
  </div>
</template>

<script>
import MovieHeader from '../../components/MovieHeader'
import MovieFooter from '../../components/MovieFooter'
import UserMessage from '../../components/UserMessage'
import SendTalkBox from '../../components/SendTalkBox'
import EmailList from '../../components/EmailList'

export default {
  components: {
    MovieHeader,
    MovieFooter,
    UserMessage,
    SendTalkBox,
    EmailList
  },
  data() {
    return {
      receiveEmails: [],
      sendEmails: []
    }
  },
  created() {
    this.getSendEmailList()
    this.getReceiveEmailList()
  },
  methods: {
    // 获取发送的站内信列表
    getSendEmailList() {
      this.$http
        .post(
          'http://localhost:3000/user/showEmail',
          {
            receive: '1', // 1为发送内容，2为接收内容
            token: localStorage.getItem('token'),
            username: localStorage.getItem('username'),
            user_id: localStorage.getItem('_id')
          },
          { emulateJSON: true }
        )
        .then(({ body }) => {
          const { data, status } = body
          if (status === 200) {
            this.sendEmails = data
          }
        })
    },
    // 获取接受的站内信列表
    getReceiveEmailList() {
      this.$http
        .post(
          'http://localhost:3000/user/showEmail',
          {
            receive: '2', // 1为发送内容，2为接收内容
            token: localStorage.getItem('token'),
            username: localStorage.getItem('username'),
            user_id: localStorage.getItem('_id')
          },
          { emulateJSON: true }
        )
        .then(({ body }) => {
          const { data, status } = body
          if (status === 200) {
            this.receiveEmails = data
          }
        })
    }
  }
}
</script>

<style lang="css" scoped>
.contentMain {
  /* margin-top: 68px; */
  padding: 0 8px;
  margin-bottom: 68px;
}
.list {
  text-align: left;
}
</style>
